할일 리스트 모달 추가#34
Conversation
Summary of ChangesHello @Jieunsse, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 사용자가 할 일 목록을 생성할 수 있는 새로운 기능을 도입합니다. 이를 위해 전용 모달 컴포넌트와 그에 따른 스타일링이 추가되었으며, 기존 모달 컴포넌트의 유연성을 높이기 위해 타입 정의가 업데이트되었습니다. 전반적으로 사용자 경험을 개선하고 새로운 기능 추가를 위한 기반을 마련합니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 할 일 리스트 생성을 위한 모달을 추가합니다. 전반적으로 잘 작성되었지만, 몇 가지 중요한 수정이 필요합니다. AddTodoList 컴포넌트가 현재 입력된 할 일의 이름을 상태로 관리하거나 onCreate 콜백으로 전달하지 않아, 핵심 기능이 동작하지 않는 문제가 있습니다. 이를 수정하기 위한 제안을 포함했습니다. 또한, CSS 파일에서 font 속성을 축약하여 가독성과 유지보수성을 높일 수 있는 부분을 발견하여 제안했습니다. Modal 컴포넌트와 관련된 contentClassName prop이 실제로는 적용되지 않는 문제도 있으니 확인이 필요합니다.
| export interface AddTodoListProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| onCreate: () => void; | ||
| } | ||
|
|
||
| export default function AddTodoList({ isOpen, onClose, onCreate }: AddTodoListProps) { | ||
| const handleSubmit = (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| onCreate(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| ariaLabelledby={TITLE_ID} | ||
| contentClassName={styles.modalContent} | ||
| > | ||
| <article className={styles.container}> | ||
| <header className={styles.header}> | ||
| <h2 id={TITLE_ID} className={styles.title}> | ||
| 할 일 목록 | ||
| </h2> | ||
| <button type="button" className={styles.closeButton} aria-label="close" onClick={onClose}> | ||
| <Image src={xMarkBig} alt="" width={24} height={24} /> | ||
| </button> | ||
| </header> | ||
|
|
||
| <form className={styles.form} onSubmit={handleSubmit}> | ||
| <Input className={styles.input} placeholder="할 일을 입력하세요" /> | ||
| <footer className={styles.footer}> | ||
| <button type="submit" className={styles.button}> | ||
| 만들기 | ||
| </button> | ||
| </footer> | ||
| </form> | ||
| </article> | ||
| </Modal> | ||
| ); | ||
| } |
There was a problem hiding this comment.
현재 AddTodoList 컴포넌트는 할 일 목록의 이름을 생성 콜백으로 전달하지 않아 기능적으로 동작하지 않습니다. 또한, contentClassName prop이 Modal 컴포넌트에서 처리되지 않아 의도한 스타일이 적용되지 않을 수 있습니다.
다음과 같이 수정하여 문제를 해결할 수 있습니다.
- 입력 값 전달:
handleSubmit함수에서 폼 데이터를 읽어onCreate콜백으로 전달합니다. 이를 위해Input에name속성을 추가하고onCreateprop의 타입 시그니처를(name: string) => void로 변경합니다. contentClassName적용:Modal컴포넌트가contentClassName을 받아서 내부 컨테이너에 적용하도록 수정해야 합니다. (이 변경은Modal.tsx파일에 적용되어야 합니다.)
아래는 AddTodoList.tsx에 대한 전체 수정 제안입니다.
export interface AddTodoListProps {
isOpen: boolean;
onClose: () => void;
onCreate: (name: string) => void;
}
export default function AddTodoList({ isOpen, onClose, onCreate }: AddTodoListProps) {
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const name = formData.get('name') as string;
if (!name?.trim()) {
return; // 또는 에러 메시지를 표시할 수 있습니다.
}
onCreate(name.trim());
};
return (
<Modal
isOpen={isOpen}
onClose={onClose}
ariaLabelledby={TITLE_ID}
contentClassName={styles.modalContent}
>
<article className={styles.container}>
<header className={styles.header}>
<h2 id={TITLE_ID} className={styles.title}>
할 일 목록
</h2>
<button type="button" className={styles.closeButton} aria-label="close" onClick={onClose}>
<Image src={xMarkBig} alt="" width={24} height={24} />
</button>
</header>
<form className={styles.form} onSubmit={handleSubmit}>
<Input name="name" className={styles.input} placeholder="할 일을 입력하세요" />
<footer className={styles.footer}>
<button type="submit" className={styles.button}>
만들기
</button>
</footer>
</form>
</article>
</Modal>
);
}
| font-family: Pretendard; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: 19px; |
There was a problem hiding this comment.
여러 font 관련 속성들(font-family, font-size, font-style, font-weight, line-height)을 font shorthand 속성을 사용하여 한 줄로 줄일 수 있습니다. 이렇게 하면 코드가 더 간결해집니다.
이러한 변경은 이 파일의 .input.input::placeholder (53-57행) 및 .button (79-83행) 선택자에도 유사하게 적용하여 코드 중복을 줄이고 가독성을 높일 수 있습니다.
| font-family: Pretendard; | |
| font-size: 16px; | |
| font-style: normal; | |
| font-weight: 500; | |
| line-height: 19px; | |
| font: 500 16px/19px Pretendard; |
1 participant
Summary
Issue
이슈번호 #33
Scope